  .f-c00 {
    color: #009dd9;
  }

  .f-c01 {
    color: #ffcc00;
  }

  .f-c02 {
    color: #ff99cc;
  }

  .f-c03 {
    color: #99cccc;
  }

  .bar-nav {
    background: #f90;
  }

  .title {
    color: #fff;
  }

  .hidden,
  .hidden span,
  .meeting-list .hidden .projector-content span .iconfont {
    font-size: 0!important;
  }

  .content-block {
    margin: 0;
    margin-top: .5rem;
  }

  .tabs {
    position: absolute;
    z-index: 12;
    width: 100%;
    background-color: #fff;
  }

  .tabs .tab {
    display: none;
  }

  .tab {
    height: 0;
    transition: height .5s ease-in-out 1s;
  }

  .tabs ul {
    background: #fff;
  }

  .tabs ul li {
    padding: 0.6rem;
    border-bottom: 1px solid rgba(219, 218, 218, 0.31);
  }

  .tabs ul li:active {
    background: #e7e7e7;
  }

  .tab-link .icon-down {
    transform: rotate(0deg);
    transition: transform .4s ease;
    margin-left: 0.3rem;
  }

  .tab-link.active .icon-down {
    transform: rotate(180deg);
  }

  .determine {
    width: 4rem;
    text-align: center;
    height: 4rem;
    position: fixed;
    right: 1rem;
    background-color: #fd6634;
    color: #fff;
    display: none;
    z-index: 111;
    bottom: 10%;
    border-radius: 50%;
  }

  .determine span {
    display: block;
    width: 3rem;
    font-size: 1rem;
    margin-left: 0.5rem;
    margin-top: -0.3rem;
  }

  .determine span.iconfont {
    font-size: 1.5rem;
    margin-left: 0.6rem;
    margin-top: 0.2rem;
  }

  .grey-line {
    display: block;
    border-left: 1px dashed #ccc;
    position: relative;
    overflow: visible;
    height: 2.6rem;
    margin-left: 0.8rem;
    margin-top: 0.2rem;
  }

  .meeting-content {
    font-size: 0.8rem;
    padding-right: 0;
  }

  .meeting-content li {
    width: 100%;
    height: 4rem;
    font-size: 0.6rem;
  }

  .reserved-meeting {
    display: block;
    position: absolute;
    color: #fff;
    width: 100%;
    text-align: center;
    z-index: 10;
  }

  .reserved-meeting span {
    display: block;
    margin-bottom: 0.2rem;
    word-wrap: break-word;
    word-break: normal;
    padding: 0 0.1rem;
  }

  .reserved-meeting:active {
    color: #fff;
  }

  .meeting-list li {
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    text-align: center;
  }

  .expired-time {
    background: #ddd!important;
    border-left: 1px solid #ccc!important;
    border-top: 1px solid #ccc!important;
  }

  .expired-time a,
  .expired-time span,
  .expired-time .iconfont {
    color: #999!important;
  }

  .expired-time a {
    background: #ddd!important;
    border-bottom: 1px solid #ccc;
  }

  .reserved-time-1-1,
  .reserved-time-2-9,
  .reserved-time-3-8,
  .reserved-time-4-7 {
    background: #209410!important;
    border-left: 1px solid #ccc!important;
    border-top: 1px solid #209410!important;
  }

  .reserved-time-1-2,
  .reserved-time-2-1,
  .reserved-time-3-9,
  .reserved-time-4-8 {
    background: #1a659f!important;
    border-left: 1px solid #ccc!important;
    border-top: 1px solid #1a659f!important;
  }

  .reserved-time-1-3,
  .reserved-time-2-2,
  .reserved-time-3-1,
  .reserved-time-4-9 {
    background: #841a9b!important;
    border-left: 1px solid #ccc!important;
    border-top: 1px solid #841a9b!important;
  }

  .reserved-time-1-4,
  .reserved-time-2-3,
  .reserved-time-3-2,
  .reserved-time-4-1 {
    background: #1a659f!important;
    border-left: 1px solid #ccc!important;
    border-top: 1px solid #1a659f!important;
  }

  .reserved-time-1-5,
  .reserved-time-2-4,
  .reserved-time-3-3,
  .reserved-time-4-2 {
    background: #209410!important;
    border-left: 1px solid #ccc!important;
    border-top: 1px solid #209410!important;
  }

  .reserved-time-1-6,
  .reserved-time-2-5,
  .reserved-time-3-4,
  .reserved-time-4-3 {
    background: #209410!important;
    border-left: 1px solid #ccc!important;
    border-top: 1px solid #209410!important;
  }

  .reserved-time-1-7,
  .reserved-time-2-6,
  .reserved-time-3-5,
  .reserved-time-4-4 {
    background: #1a659f!important;
    border-left: 1px solid #ccc!important;
    border-top: 1px solid #1a659f!important;
  }

  .reserved-time-1-8,
  .reserved-time-2-7,
  .reserved-time-3-6,
  .reserved-time-4-5 {
    background: #841a9b!important;
    border-left: 1px solid #ccc!important;
    border-top: 1px solid #841a9b!important;
  }

  .reserved-time-1-9,
  .reserved-time-2-8,
  .reserved-time-3-7,
  .reserved-time-4-6 {
    background: #1a659f!important;
    border-left: 1px solid #ccc!important;
    border-top: 1px solid #1a659f!important;
  }

  .relative {
    position: relative;
    border-top: 1px solid #ccc!important;
  }

  .meeting-list-cont {
    display: none;
  }

  .head-meeting-cont {
    height: 0;
    padding: 0;
    z-index: 20;
  }

  .head-meeting {
    width: 100%;
    height: 3.6rem;
    padding-left: 15%;
    background-color: #efeff4;
  }

  .head-meeting li {
    float: left;
    background: #efeff4;
    height: 3.6rem;
    font-size: 0.6rem;
    text-align: center;
    padding-top: 0.5rem;
  }

  .head-meeting li span {
    display: block;
  }

  .meeting-list li.reserved {
    background: #009dd9;
    border-color: #009dd9;
  }

  .meeting-list li.reserved a {
    color: #fff;
  }

  .meeting-list li.reservations {
    background: #fff;
    position: relative;
  }

  .meeting-list li.reservations .icon-check {
    position: absolute;
    left: 25%;
    top: 25%;
    font-size: 1rem;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    background-color: green;
    border-radius: 50%;
    color: #fff;
    display: none;
  }

  .meeting-list li.reservations .tip {
    position: absolute;
    left: -5%;
    top: -116%;
    font-size: 4rem;
    color: #0db8f6;
    display: none;
  }

  .meeting-list li.reservations .tip-text {
    display: block;
    font-size: 0.6rem;
    color: #f74c30;
    position: absolute;
    left: 22%;
    top: 33%;
    width: 2rem;
  }
  /*   .meeting-list li.reservations:active .tip {
  display: block;
}
 */

  .meeting-list .last-ul li {
    border-right: 1px solid #ccc;
  }

  .meeting-list li:first-child {
    border: none;
  }

  .meeting-list li:nth-child(5) {
    border-left: none;
    border-right: none;
    background: #efeff4;
    padding-top: 1.2rem;
    font-size: .8rem;
    height: 0rem;
  }

  .meeting-list ul li:last-child {
    border-bottom: 1px solid #ccc;
  }

  .meeting-list ul {
    background: #fff;
  }

  .meeting-list ul .meeting-name {
    background: #efeff4;
    height: 3rem;
    font-size: 0.6rem;
    text-align: center;
  }

  .meeting-list ul .meeting-name span {
    display: block;
  }

  .projector-content {
    margin: 0;
  }

  .projector-content .iconfont {
    color: #f60;
  }

  .meeting-list .meeting-name .projector-content span,
  .head-meeting .projector-content span {
    display: inline-block;
    margin-right: 0.2rem;
  }

  .time-list {
    font-size: 0.6rem;
  }

  .meeting-content .time-list ul {
    margin-top: -0.9rem;
  }

  .meeting-content .time-list li {
    height: 3.9rem;
  }

  .meeting-content .time-list li.lunch-hour {
    height: 2rem;
  }

  .number-people {
    color: #f60;
    font-size: 0.6rem;
    margin-left: 0.4rem;
    display: inline-block;
  }

  .row {
    margin-left: -2%;
  }

  .row .col-25 {
    width: 25%;
    margin-left: 0;
  }

  .row .col-33 {
    margin-left: 0;
  }

  @media only screen and (min-width: 320px) and (max-width: 768px) {
    .row .col-33 {
      width: 32%;
    }
  }

  .row .col-15 {
    margin-right: 3%;
    margin-left: 1%;
  }

  .morning,
  .afternoon {
    color: red;
    padding-top: 2rem;
  }

  .meeting-content .time-list li.afternoon {
    padding-top: 0;
    height: 1rem;
    margin-top: -1.2rem;
  }

  .meeting-content .time-list li.morning {
    height: 3.6rem;

    padding-top: 2.5rem;
}

  .row .col-85 {
    margin-left: 0!important;
  }

  .icon-kafei {
    color: #f60;
    font-size: .8rem;
  }

  .equipment {
    margin-top: .5rem;
  }

  .equipment .remark {
    display: block;
  }

  .equipment .remark .iconfont {
    color: #f60;
    font-size: .8rem;
  }
